<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="0" :md="0">
        <el-card>
          <el-date-picker v-model="date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="0" :md="0">
        <el-input
          placeholder="请输入代办项"
          v-model="todo"
          style="width: 60%; margin-left: 10px; margin-right: 10px"
          clearable
        >
        </el-input>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="miniaddTodo()"
        ></el-button>
        <el-card class="box-card" v-loading="loading">
          <div v-for="todo in todos" class="text item">
            <el-row style="margin-top: 10px">
              <el-col :span="18"> {{ todo.todo }}</el-col>
              <el-col :span="6"
                ><template>
                  <el-tag v-if="todo.status == 1" size="mini">完成</el-tag>
                  <el-tag v-else type="danger" size="mini">未完成</el-tag>
                </template></el-col
              >
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="0" :sm="24">
        <el-card class="box-card">
          <el-calendar v-model="date">
            <template
              slot="dateCell"
              slot-scope="{ date, data }"
              v-loading="loading"
            >
              <p
                :class="data.isSelected ? 'is-selected' : ''"
                style="width: 100%"
                @click="getTodoTheDay(data.day)"
              >
                {{ data.day.split("-").slice("-")[2] }}
                <span> {{ getNowTodo(data) }} </span>
                <span>{{ getNowTodoNum(data) }}</span>
              </p>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="time"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-input
        placeholder="请输入代办项"
        v-model="todo"
        style="width: 60%; margin-right: 10px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addTodo()"
      ></el-button>
      <el-table :data="theDayTodo" height="300" style="width: 100%">
        <el-table-column prop="todo" label="待办项" width="300">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1"><el-tag>完成</el-tag></span>
            <span v-else><el-tag type="danger">未完成</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">
              <el-button
                type="text"
                size="small"
                @click="updataStatus(scope.row.todolistId)"
                >未完成</el-button
              >
            </span>
            <span v-else>
              <el-button
                type="text"
                size="small"
                @click="updataStatus(scope.row.todolistId)"
                >完 成</el-button
              >
            </span>
            <el-button
              type="text"
              size="small"
              style="margin-left: 5px"
              @click="deleteTodo(scope.row.todolistId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import todoApi from "@/api/todo";

export default {
  data() {
    return {
      date: new Date(),

      todos: [],
      loading: false,
      alltodos: [],
      todoNum: 0,

      // 某天的所有todo
      theDayTodo: [],

      // 对话框
      dialogVisible: false,

      // 那一天的todo
      time: "",

      // 添加
      todo: "",
    };
  },
  methods: {
    // 对话框关闭之前
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // 更新数据
          this.getTodoTheDay(this.time);
          // 清空输入框
          this.todo = "";
          // 刷新页面
          location.reload();

          done();
        })
        .catch((_) => {});
    },

    // 获取当前的todo详情
    getTodoTheDay(day) {
      this.dialogVisible = true;
      this.loading = true;
      const todo = {
        userId: this.$store.state.user.userId,
        createTime: day + "T00:00:00",
      };
      todoApi.getTodoByDate(todo).then((resp) => {
        this.theDayTodo = resp.data;
        this.loading = false;
        this.time = day;
      });
    },

    getTodo(day) {
      this.loading = true;
      const todo = {
        userId: this.$store.state.user.userId,
        createTime: day + "T00:00:00",
      };
      todoApi.getTodoByDate(todo).then((resp) => {
        this.todos = resp.data;
        this.loading = false;
      });
    },

    getAllTodo() {
      this.loading = true;
      todoApi.getAll(this.$store.state.user.userId).then((resp) => {
        this.alltodos = resp.data;
        this.loading = false;
      });
    },

    getNowTodo(data) {
      for (let i = 0; i < this.alltodos.length; i++) {
        let time = this.alltodos[i].createTime.split("T");
        if (time[0] == data.day) {
          return this.alltodos[i].todo;
        }
      }
      return "";
    },
    getNowTodoNum(data) {
      this.todoNum = 0;
      for (let i = 0; i < this.alltodos.length; i++) {
        let time = this.alltodos[i].createTime.split("T");
        if (time[0] == data.day) {
          return "......";
        }
      }
      return "";
    },

    // 更新状态
    updataStatus(todoId) {
      todoApi.updataStatus(todoId).then((resp) => {
        // 显示添加成功提示
        this.$message({
          message: resp.message,
          type: "success",
        });
        // 更新数据
        this.getTodoTheDay(this.time);
      });
    },

    // 删除todo
    deleteTodo(todoId) {
      this.$confirm("此操作将永久删除该代办项", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          todoApi.deleteTodo(todoId).then((resp) => {
            // 显示删除成功提示
            this.$message({
              message: resp.message,
              type: "success",
            });
            // 更新数据
            this.getTodoTheDay(this.time);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加todo
    // 添加待办项
    addTodo() {
      // 如果待办项为空则提示用户输入
      if (this.todo == "" || this.todo == undefined) {
        this.$message("请输入待办项");
        return;
      }

      // 如果待办项为超过100的长度则提示用户带办项太长
      if (this.todo.length >= 50) {
        this.$message("字数不能超过50个哦~");
        return;
      }

      todoApi
        .addTodo({
          todo: this.todo,
          userId: this.$store.state.user.userId,
          createTime: this.time + "T00:00:00",
        })
        .then((resp) => {
          // 显示添加成功提示
          this.$message({
            message: resp.message,
            type: "success",
          });
          // 更新数据
          this.getTodoTheDay(this.time);
          // 清空输入框
          this.todo = "";
        });
    },
    miniaddTodo() {
      // 如果待办项为空则提示用户输入
      if (this.todo == "" || this.todo == undefined) {
        this.$message("请输入待办项");
        return;
      }

      // 如果待办项为超过100的长度则提示用户带办项太长
      if (this.todo.length >= 50) {
        this.$message("字数不能超过50个哦~");
        return;
      }
      let year = this.date.getFullYear(); //年份
      let month = this.date.getMonth() + 1;
      let dates = this.date.getDate(); // 日

      this.time =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (dates < 10 ? "0" + dates : dates);
      todoApi
        .addTodo({
          todo: this.todo,
          userId: this.$store.state.user.userId,
          createTime: this.time + "T00:00:00",
        })
        .then((resp) => {
          // 显示添加成功提示
          this.$message({
            message: resp.message,
            type: "success",
          });
          // 更新数据
          this.getTodo(this.time);
          // 清空输入框
          this.todo = "";
        });
    },
  },
  created() {
    const date = new Date();
    var year = date.getFullYear(); //年份
    var month = date.getMonth() + 1;
    var dates = date.getDate(); // 日

    const day =
      year +
      "-" +
      (month < 10 ? "0" + month : month) +
      "-" +
      (dates < 10 ? "0" + dates : dates);

    this.getTodo(day);
    this.getAllTodo();
  },
  watch: {
    date(newVal, oldVal) {
      if (newVal !== null && newVal != undefined) {
        let year = newVal.getFullYear(); //年份
        let month = newVal.getMonth() + 1;
        let dates = newVal.getDate(); // 日

        let day =
          year +
          "-" +
          (month < 10 ? "0" + month : month) +
          "-" +
          (dates < 10 ? "0" + dates : dates);
        this.getTodo(day);
      }
      let year = oldVal.getFullYear(); //年份
      let month = oldVal.getMonth() + 1;
      let dates = oldVal.getDate(); // 日

      const day =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (dates < 10 ? "0" + dates : dates);
      this.getTodo(day);
    },
  },
};
</script>

<style scoped>
p {
  width: 100%;
  height: 100%;
}
.el-card {
  width: 100%;
  height: 100%;

  margin: 10px;
}

.el-card span {
  width: 100%;
  display: block;
  margin-top: 3px;
  font-size: 10px;

  border-radius: 3px;
  background-color: rgba(64, 158, 255, 0.3);
}
</style>
